<!-- 三农课堂 -->
<template>
	<div @click="goDetail(list.list.classUuid)" class="classroom">
		<img :src="list.list.coverImage" alt="">
		<p class="snp1">{{list.list.className}}</p>
		<li>
			<span>主讲人：{{list.list.classManager}}</span>
			<span>{{list.list.classStatus}}人学习</span>
		</li>
	</div>
</template>

<script setup>
	
	import { onBeforeMount } from 'vue'
	import { useRouter } from 'vue-router'
	const router = useRouter()
	const list = defineProps({
		list:Object
	})
	const goDetail = (id)=> {
		router.push({
			path:'/classDetail',
			query:{id}
		})
	}
</script>

<style scoped lang="scss">
	.classroom{
		width: 262px;
		height: 264px;
		background: #FFFFFF;
		overflow: hidden;
		border-radius: 10px;
		border: 1px solid rgba(17,145,142,0.1);
		margin-top: 30px;
		margin-right: 30px;
		img{
			width: 262px;
			height: 174px;
		}
		p{
			width: 230px;
			margin: 15px;
		}
		li{
			width: 230px;
			margin: 15px;	
			display: flex;
			justify-content: space-between;
		}
	}
	.classroom:nth-of-type(4n+0) {margin-right: 0;}
	.isuser{
		width: 282px;
		height: 276px;
		margin-right: 30px;
		background: #FFFFFF;
		border-radius: 10px;
		border: 1px solid rgba(17,145,142,0.1);
		margin-top: 30px;
		img{
			width: 280px;
			height: 186px;
		}
		p{
			width: 230px;
			margin: 15px;
		}
		li{
			width: 230px;
			margin: 15px;	
			display: flex;
			justify-content: space-between;
		}
	}
	.isuser:nth-of-type(3n+0) {margin-right: 0;}
</style>